<template>
<div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>预定车位</span>
    </div>
    <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="100px" class="demo-orderForm">
      <el-form-item label="选择车位" prop="parkingSpaceId">
        <el-select v-model="orderForm.parkingSpaceId" placeholder="请选择车位">
          <el-option v-for="space in spaceList" :key="space.id" :label="space.name" :value="space.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="停车时间" prop="dates">
        <el-date-picker
          v-model="dates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('orderForm')">提交</el-button>
        <el-button @click="resetForm('orderForm')">重置</el-button>
      </el-form-item>


    </el-form>
  </el-card>

</div>
</template>

<script>
import {addOrupdate, getSpaceList} from "@/api/order";

export default {
  name: "index",
  data(){
    return{
      lotId:'',
      userId:'',
      dates:[],
      orderForm:{
        id:'',
        userName:'',
        parkingLotId:'',
        parkingSpaceId:'',
        arrivalTime:'',
        departureTime:'',
        principalId:''
      },
      spaceList:[],
      rules: {
        username: [
          {required: true, message: '请选择车位', trigger: 'blur'},
        ],
      }
    }
  },created() {
    this.lotId=this.$route.query.lotId
    this.userId=this.$route.query.userId
    this.getSpace();
  },
  methods:{

    submitForm(formName) {
      this.orderForm.parkingLotId=this.lotId
      this.orderForm.userName=sessionStorage.getItem("username")
      this.orderForm.arrivalTime=this.dates[0]
      this.orderForm.departureTime=this.dates[1]
      this.orderForm.principalId=this.userId
      this.$refs[formName].validate((valid) => {
          if (valid) {
            addOrupdate(this.orderForm).then(res=>{
              if(res.code===20000){
                this.$message.success("提交订单成功")
                this.$router.push({path:'/order/order',query:{userId:res.data}})
              }
            })
          }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getSpace(){
      getSpaceList(this.lotId).then(res=>{
        if(res.code===20000){
          this.spaceList=res.data
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
